<template>
    <div id="singers">
        <div v-if="singerInfo.cover" class="singerDetail">
            <!-- 歌单信息 -->
            <div class="listInfo">
                <!-- 歌单封面 -->
                <div class="listAvatar">
                    <img :src="singerInfo.cover + '?param=300y300'" alt=""/>
                </div>
                <div class="right">
                    <!-- 标题 -->
                    <div class="title">
                        <div class="titleContent">{{ singerInfo.name }}</div>
                    </div>
                    <!-- 操作按钮 -->
                    <div class="buttons">
                        <div class="buttonItem" @click="subSinger">
                            <i class="iconfont icon-xihuan el-icon-star-off" :class="isSub ? 'green' : ''"></i>
                            <span>{{ isSub ? "已收藏" : "收藏" }}</span>
                        </div>
                        <div class="buttonItem">
                            <i class="iconfont icon-link el-icon-s-home"></i>
                            <span>个人主页</span>
                        </div>
                    </div>
                    <!-- 歌曲列表的歌曲数量和播放量 -->
                    <div class="otherInfo">
                        <div class="musicNum">单曲数 : {{ singerInfo.musicSize }}</div>
                        <div class="musicNum">专辑数 : {{ singerInfo.albumSize }}</div>
                        <div class="musicNum">MV数 : {{ singerInfo.mvSize }}</div>
                    </div>
                </div>
            </div>
            <!-- 歌曲列表 -->
            <div class="musicList">
                <el-tabs value="first" @tab-click="clickTab">
                    <el-tab-pane label="专辑" name="first">
                        <div class="topSongs" v-if="topSongs.topSongs">
                            <!-- 热门50首没有id，将歌手id作为listid -->
                            <list-table
                                    :officialListDetailItem="topSongs"
                                    @handleRowDbClick="handleRowDbClick"
                                    @clickCheckAll="allTopSongs"
                                    :isCheckAllShow="isCheckAllShow"
                                    :cover="require('/src/assets/img/topSongsLogo.png')"
                                    :listId="this.$route.params.id.toString()"
                            >
                                <div slot="header" class="header">
                                    <div class="title">热门50首</div>
                                </div>
                            </list-table>
                        </div>
                        <div
                                class="albumItemContainer"
                                v-if="singerAlbum.length !== 0"
                        >
                            <div
                                    class="albumItem"
                                    v-for="(item, index) in singerAlbum"
                                    :key="index"
                            >
                                <list-table
                                        :officialListDetailItem="item.songsObj"
                                        @handleRowDbClick="handleRowDbClick"
                                        @clickCheckAll="clickListCardItem"
                                        :cover="item.album.blurPicUrl + '?param=300y300'"
                                        :listId="item.album.id.toString()"
                                >
                                    <div slot="header" class="header">
                                        <div class="title">{{ item.album.name }}</div>
                                    </div>
                                </list-table>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="MV" name="second">
                        <video-list-card
                                :videoList="singerMvInfo.mvs"
                                :isLoad="true"
                                @clickListCardItem="goToVideoDetail"
                                @bottomLoad="bottomLoad"
                        ></video-list-card>
                    </el-tab-pane>
                    <el-tab-pane label="歌手详情" name="third">
                        <div class="singerDesc">{{ singerInfo.briefDesc }}</div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import {handleMusicTime} from "@/plugins/utils";
    import ListTable from "@/components/listTable/ListTable.vue";
    import VideoListCard from "@/components/videoListCard/VideoListCard.vue";

    // 记录上一首播放的音乐信息  清空小喇叭和红字样式
    let currentRowInfo = {};
    // 定时器名称
    let timer;

    export default {
        components: {ListTable, VideoListCard},
        name: "SingerDetail",
        data() {
            return {
                singerInfo: {},
                // 热门50首
                topSongs: {},
                // 歌手专辑
                singerAlbum: [],
                // 专辑页数
                albumPage: 1,
                isAlbumMore: false,
                // 是否显示topSong的查看全部按钮
                isCheckAllShow: true,
                // 歌手mv数据
                singerMvInfo: {mvs: [], hasMore: false},
                // mv页数
                videoPage: 1,
                // 是否是双击操作
                isDbc: false,
                // 是否收藏了当前歌手
                isSub: false,
            };
        },
        methods: {
            // 请求
            // 请求歌手详情
            async getSingerInfo() {
                let res = await this.$request("/artist/detail", {
                    id: this.$route.params.id,
                });
                // console.log(res);
                this.singerInfo = res.data.data.artist;
            },
            // 请求歌手热门50首歌曲
            async getSingerTopSongs() {
                let res = await this.$request("/artist/top/song", {
                    id: this.$route.params.id,
                });
                // console.log(res);
                let topSongs = res.data.songs;
                // 处理歌单中歌曲的时间
                topSongs.forEach((item, index) => {
                    topSongs[index].dt = handleMusicTime(item.dt);
                });
                // topSongs改成对象，并向里面添加isOpen属性，用于点击查看列表所有歌曲
                this.topSongs = {topSongs, isOpen: false};
            },
            // 请求专辑列表 再用专辑id查询专辑信息
            async getAlbumInfo() {
                let res = await this.$request("/artist/album", {
                    id: this.$route.params.id,
                    limit: 20,
                    offset: (this.albumPage - 1) * 20,
                });
                this.isAlbumMore = res.data.more;
                res = res.data.hotAlbums;
                await res.forEach((item) => {
                    this.getAlbumDetail(item.id);
                });
                // console.log("拿到了专辑数据并保存", this.singerAlbum);
            },
            // 请求专辑详情信息
            async getAlbumDetail(id) {
                let res = await this.$request("/album", {id});
                // 将数组songs再保存一个对象格式，方便组件使用
                res = res.data;
                let songs = res.songs;
                // 处理歌单中歌曲的时间
                songs.forEach((item, index) => {
                    songs[index].dt = handleMusicTime(item.dt);
                });
                res.songsObj = {songs};
                this.singerAlbum.push(res);
            },
            // 请求歌手 mv 数据
            async getSingerMv() {
                let res = await this.$request("/artist/mv", {
                    id: this.$route.params.id,
                    limit: 20 * this.videoPage,
                });
                console.log(res);
                this.singerMvInfo = res.data;
            },

            cleanStyle(i, listId) {
                let tables = document.querySelectorAll("table");
                // 找到歌单的索引
                let listIndex = -1;
                if (listId == this.$route.params.id) {
                    listIndex = 0;
                } // 专辑的情况
                else {
                    listIndex = this.singerAlbum.findIndex(
                        (item) => item.album.id == listId
                    );
                    // 如果没有，说明目前还没有渲染或者还没有请求
                    if (listIndex == -1) {
                        console.log("can not find listIndex");
                        return;
                    }
                    listIndex += 1;
                }
                // console.log("执行了清空");
                // console.log("i:", i);
                if (tables[listIndex] && tables[listIndex].children[i]) {
                    let lastRow = tables[listIndex].children[i];
                    lastRow.querySelector(".index").innerHTML = i + 1;
                    lastRow.querySelector(".musicName").style.color = "#1f1f1f";
                }
            },

            // 双击选中某首歌曲
            handleViewDOM(id, listId, index) {
                // 先清空之前的样式
                if (currentRowInfo.listId) {
                    this.cleanStyle(currentRowInfo.i, currentRowInfo.listId);
                }
                let tables = document.querySelectorAll("table");
                // 这里的 id是歌曲id   index 双击歌曲在歌单中的索引   listId是歌单id
                let i = -1;
                // 根据listId找歌单索引 listIndex
                let listIndex = -1;

                // top50的情况
                if (listId == this.$route.params.id) {
                    listIndex = 0;
                } // 专辑的情况
                else {
                    listIndex = this.singerAlbum.findIndex(
                        (item) => item.album.id == listId
                    );
                    // console.log(listIndex, "listIndex");
                    // 如果没有，说明目前还没有渲染或者还没有请求
                    if (listIndex == -1) {
                        console.log("can not find listIndex");
                        return;
                    }
                    listIndex += 1;
                }

                // 找歌曲在歌单中的索引 i
                if (index == undefined) {
                    // 分top50和专辑两种情况
                    if (listIndex == 0) {
                        i = this.topSongs.topSongs.findIndex((item) => item.id == id);
                    } else {
                        i = this.singerAlbum[listIndex - 1].songs.findIndex(
                            (item) => item.id == id
                        );
                    }
                } else {
                    i = index;
                }
                // console.log(i, "i");
                // console.log(index, "index");
                // 渲染
                if (tables[listIndex] && tables[listIndex].children[i]) {
                    let currentRow = tables[listIndex].children[i];
                    // console.log(currentRow);
                    currentRow.querySelector(".index").innerHTML =
                        "<i class='iconfont icon-yinliang el-icon-headset' style='color:#20b2aa'></i>";
                    currentRow.querySelector(".musicName").style.color = "#20b2aa";

                    // 保存当前数据 供下次清空样式使用
                    currentRowInfo.i = i;
                    // 因为歌单的顺序可能会改变，所以不要直接保存索引
                    currentRowInfo.listId = listId;
                    currentRowInfo.singerId = this.$route.params.id;
                    // 将currentRowInfo上传至vuex 供下次重新进入页面使用
                    this.$store.commit("updateCurrentRowInfo", currentRowInfo);
                }
            },

            // 行双击事件的回调
            // 这里的 id是歌曲id   index 双击歌曲在歌单中的索引   listId是歌单id
            handleRowDbClick({id, index, listId}) {
                console.log(id);
                console.log(index);
                console.log(listId);
                this.isDbc = true;

                this.handleViewDOM(id, listId, index);

                // 播放的逻辑操作
                if (listId != this.$route.params.id) {
                    let musicListIndex = this.singerAlbum.findIndex(
                        (item) => item.album.id == listId
                    );
                    // console.log(musicListIndex);
                    this.$store.commit("updateMusicId", id);
                    // 如果歌单发生变化,则提交歌单到vuex
                    if (listId != this.$store.state.musicListId) {
                        // 将歌单传到vuex
                        this.$store.commit("updateMusicList", {
                            musicList: this.singerAlbum[musicListIndex].songs,
                            musicListId: listId,
                        });
                    }
                } else {
                    this.$store.commit("updateMusicId", id);
                    // 如果歌单发生变化,则提交歌单到vuex
                    // 如果是topsong 就拿歌手的id 当作listid 作为唯一辨识
                    if (this.$route.params.id != this.$store.state.musicListId) {
                        // 将歌单传到vuex
                        this.$store.commit("updateMusicList", {
                            musicList: this.topSongs.topSongs,
                            musicListId: this.$route.params.id,
                        });
                    }
                }
                // console.log(123);
            },

            // 点击榜单进入歌单详情界面
            clickListCardItem({listId}) {
                console.log(listId);
                this.$router.push({name: "album", params: {id: listId}});
                // console.log(123);
            },

            // 查看热门50首全部歌曲
            allTopSongs() {
                this.topSongs.isOpen = true;
                this.isCheckAllShow = false;
                // 查看全部后再次渲染样式
                setTimeout(() => {
                    if (
                        this.$store.state.currentRowInfo.singerId == this.$route.params.id
                    ) {
                        this.handleViewDOM(
                            this.$store.state.musicId,
                            this.$store.state.musicListId
                        );
                    }
                }, 500);
            },

            // mv上拉加载
            bottomLoad() {
                if (this.singerMvInfo.hasMore === true) {
                    this.videoPage += 1;
                    this.getSingerMv();
                }
            },
            // 点击视频卡片进入视频详情
            goToVideoDetail({id}) {
                if (!this.$store.state.isLogin) {
                    this.$message.error("登录后才能观看MV哦!");
                    return;
                }
                // console.log(id);
                this.$router.push({name: "videoDetail", params: {id, type: "mv"}});
            },
            // 点击el-tab-pane的回调
            clickTab(e) {
                console.log(e.index);
                if (e.index == 1 && this.singerMvInfo.mvs.length == 0) {
                    this.getSingerMv();
                }
            },
            // 判断用户是否收藏了该歌手
            // 点击收藏歌手按钮的回调
            async subSinger() {
                if (!this.$store.state.isLogin) {
                    this.$message.error("请先登录!");
                    return;
                }
                this.isSub = !this.isSub;
                // 发送请求
                await this.$request("/artist/sub", {
                    id: this.$route.params.id,
                    t: this.isSub ? 1 : 0,
                });

            },
        },
        created() {
            this.getSingerInfo();
        },
        watch: {
            // singerAlbum() {
            //   this.disabled = !(this.singerAlbum.length != 0 && this.isAlbumMore);
            // },
            // 音乐加载完成后重置isDbc
            "$store.state.isMusicLoad"(isMusicLoad) {
                if (!isMusicLoad) {
                    this.isDbc = false;
                }
            },

            // eslint-disable-next-line no-unused-vars
            "$store.state.musicId"(current, last) {
                // 判断是否是双击，如果是双击则不用调用handleView
                if (!this.isDbc) {
                    // id,listId
                    this.handleViewDOM(
                        this.$store.state.musicId,
                        this.$store.state.musicListId
                    );
                }
            },

            // 监听singerAlbum的变化
            singerAlbum() {
                this.disabled = !(this.singerAlbum.length != 0 && this.isAlbumMore);
                clearTimeout(timer);
                timer = setTimeout(() => {
                    if (
                        this.$store.state.currentRowInfo.singerId === this.$route.params.id
                    ) {
                        this.handleViewDOM(
                            this.$store.state.musicId,
                            this.$store.state.musicListId
                        );
                    }
                }, 500);
            },
        },
        async mounted() {
            await this.getSingerTopSongs();
            await this.getAlbumInfo();
            this.$nextTick(() => {
                if (this.$store.state.currentRowInfo.singerId === this.$route.params.id) {
                    this.handleViewDOM(
                        this.$store.state.musicId,
                        this.$store.state.musicListId
                    );
                }
            });
        },
    };
</script>

<style scoped>
    .singerDetail {
        overflow-y: hidden;
        width: 900px;
        height: 100%;
        margin: auto;
        border-left: 1px #cccccc solid;
        border-right: 1px #cccccc solid;
        background-color: white;
    }

    #singers {
        background-color: rgb(247, 247, 247);
    }

    .listInfo {
        display: flex;
        padding: 25px 10px;
    }

    .listAvatar {
        width: 150px;
        height: 150px;
        overflow: hidden;
        border-radius: 10px;
        margin-right: 15px;
    }

    .listAvatar img {
        width: 100%;
    }

    .right {
        margin-top: 10px;
        width: calc(100% - 200px);
    }

    .title {
        display: flex;
        align-items: center;
    }

    .titleContent {
        font-size: 20px;
        font-weight: 600;
        color: #373737;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 90%;
    }

    .buttons {
        margin: 15px 0 0 -5px;
        display: flex;
    }

    .buttonItem {
        font-size: 12px;
        padding: 8px 15px;
        border: 1px solid #ddd;
        border-radius: 20px;
        transform: scale(0.9);
    }

    .buttonItem i {
        font-size: 12px;
        margin-right: 3px;
        transform: scale(0.9);
    }

    .otherInfo {
        margin: 15px 0 0 -30px;
        display: flex;
        font-size: 12px;
        transform: scale(0.9);
    }

    .musicNum {
        margin-right: 13px;
    }

    .musicList {
        margin: 0 10px;
    }

    .title {
        font-size: 16px;
        font-weight: 600;
        color: black;
        margin-bottom: 10px;
    }

    .singerDesc {
        font-size: 12px;
        color: #373737;
        line-height: 25px;
        letter-spacing: 0.5px;
        text-indent: 2em;
    }

    .green {
        color: #20b2aa;
    }
</style>